<template>
  <div class="box">
    <div class="head">
      <van-nav-bar>
        <template #left>
          <van-icon
            name="arrow-left"
            size="25"
            color="black"
            @click="$router.back()"
          />
        </template>
        <template #right>
          <van-search
            v-model="value"
            placeholder="请输入搜索关键词"
            @focus="goSearch"
          />
        </template>
      </van-nav-bar>
    </div>
    <div class="main">
      <van-tree-select
        :items="items"
        :main-active-index.sync="active"
        @click-nav="getList"
      >
        <template #content>
          <h2>{{ items[active].text }}</h2>
          <van-grid :column-num="2" icon-size="80px" v-if="active != 0">
            <van-grid-item
              v-for="(item, index) in RightList"
              :key="index"
              icon="https://img20.360buyimg.com/focus/s140x140_jfs/t1/86638/37/11918/19572/5e3e4307E7606f742/0210ac72c0d9275e.jpg"
              :text="item.brand"
               @click="goCartList(item.brand)"
              color="black"
            />
          </van-grid>
          <van-grid :column-num="3" icon-size="80px" v-else>
            <van-grid-item
              v-for="(item, index) in RightList"
              :key="index"
              icon="//img11.360buyimg.com/focus/s140x140_jfs/t11749/28/952474396/2583/64b85652/59fc31b6N4feb7d84.jpg"
              :text="item.keyword"
              @click="goCartList(item.keyword)"
              color="black"
            />
          </van-grid>
        </template>
      </van-tree-select>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
import Vue from "vue";
import { getcategorylistlist, getProCateList, getHotword } from "../api/kind";
import { Search, NavBar, TreeSelect, Grid, GridItem } from "vant";

Vue.use(Search);
Vue.use(NavBar);
Vue.use(TreeSelect);
Vue.use(Grid);
Vue.use(GridItem);

export default {
  name: "Kind",
  data() {
    return {
      value: "",
      active: 0,
      items: [{ text: "热门推荐" }],
      RightList: [],
    };
  },
  methods: {
    getList() {
      // console.log(this.items);
      // console.log(this.active);
      if (this.active == 0) {
        getHotword().then((res) => {
          // console.log(res.data.data);
          this.RightList = res.data.data;
        })
      } else {
        getProCateList({ category: this.items[this.active].text }).then(
          (res) => {
            // console.log(res.data.data);
            this.RightList = res.data.data;
          }
        );
      }
    },
    goSearch() {
      this.$router.push("/search");
    },
    goCartList(keyword) {
      console.log(keyword);
      this.value = keyword;
      this.$router.push("/CartList/" + keyword);
    },
  },
  created() {
    getcategorylistlist().then((res) => {
      // console.log(res.data.data);
      res.data.data.forEach((item) => {
        this.items.push({ text: item });
      });
    });
    getHotword().then((res) => {
      // console.log(res.data.data);
      this.RightList = res.data.data;
    });
  },
};
</script>
<style scoped>
::v-deep .van-search {
  height: 100%;
  width: 100%;
}
::v-deep .van-nav-bar__right {
  left: 0.2rem;
}
::v-deep .van-tree-select {
  height: 100% !important;
}
::v-deep .van-icon__image {
  width: 100%;
}
</style>